.slickSlider__product,
.slickSlider
    min-width: $min_width
    position: relative
    .slick-dots
        display: flex
        position: absolute
        left: 62px
        bottom: 32px
        padding: 0px
        gap: 16px
        li
            width: 32px
            height: 8px
            background-color: $back_color
            border-radius: 30px
            cursor: pointer
            border: 3px solid $back_color
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
            transition: all 0.3s cubic-bezier(.25,.8,.25,1)
            button
                color: transparen
                display: none
       
        .slick-active
            background-color: $active_color
            border: 3px solid $active_color
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
            transition: all 0.3s cubic-bezier(.25,.8,.25,1)
            
        li:hover
            border: 3px solid $active_color
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
            cursor: pointer
    .slickSlider__slaid
        border-radius: 0 0 5px 5px
        overflow: hidden
        height: 680px
        .slickSlider__header
            display: flex
            flex-direction: column
            position: absolute
            left: 64px
            top: 32px
            h2
                font-weight: 400
                background-color: $back_color
                padding: 16px 32px
                border-radius: 5px
                gap: 32
                text-align: center
                margin: 0
                box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
                transition: all 0.3s cubic-bezier(.25,.8,.25,1)
            h2:hover
                box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
                cursor: pointer
                color: $active_color
            .slickSlider__date
                display: flex
                flex-direction: row
                padding: 0px
                gap: 32px
                .slickSlider__dateBox
                    display: flex
                    flex-direction: row
                    position: relative
                    div
                        .date
                                background: $back_color
                                border-radius: 5px
                                font-size: 1em
                                font-weight: 400
                                
                                box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
                                transition: all 0.3s cubic-bezier(.25,.8,.25,1)
                        .date:hover
                            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
                            cursor: pointer
                            color: $active_color
                        a
                            display: block
                            padding: 12px 28px
                    .days
                        position: absolute
                        font-size: 0.6em
                        padding: 6px
                        background: $back_color
                        border-radius: 5px
                        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
                        top: -4%
                        right: -22%
                        color: $active_color
                        

    img
        width: 100%
        object-fit: cover
        // height: 680px

@media (max-width: 998px)
    .slickSlider
        .slickSlider__slaid
            .slickSlider__header
                margin-right: 16px
                left: 16px
                // h2
                //     font-size: 1em
        .slick-dots
            left: 16px
            gap: 8px
            li
                width: 22px
                height: 6px
